<template>
	<view>
		<totalMask :show.sync="isShow" :showType="showType">
			<view class="nvue-flex">
				<block v-if="current_tab == 0">
					<block v-if="current_beauty == 0">
						<view class="wrap-switch" :style="{width: windowsW}">
							<slider :value="my_gh_value" min="0" max="9" step="1" activeColor="#606dce" backgroundColor="#FFFFFF" @changing="onGhChange" @change="onGhChange" />
						
							<view class="current">
								<text class="value">{{my_gh_value}}</text>
							</view>
						</view>
					</block>
					
					<block v-else-if="current_beauty == 1">
						<view class="wrap-switch" :style="{width: windowsW}">
							<slider :value="my_zr_value" min="0" max="9" step="1" activeColor="#606dce" backgroundColor="#FFFFFF" @changing="onZRChange" @change="onZRChange" />
						
							<view class="current">
								<text class="value">{{my_zr_value}}</text>
							</view>
						</view>
					</block>
					
					<block v-else-if="current_beauty == 2">
						<view class="wrap-switch" :style="{width: windowsW}">
							<slider :value="my_hr_value" min="0" max="9" step="1" activeColor="#606dce" backgroundColor="#FFFFFF" @changing="onHRChange" @change="onHRChange" />
						
							<view class="current">
								<text class="value">{{my_hr_value}}</text>
							</view>
						</view>
					</block>
					
					<block v-else-if="current_beauty == 3">
						<view class="wrap-switch" :style="{width: windowsW}">
							<slider :value="my_mb_value" min="0" max="9" step="1" activeColor="#606dce" backgroundColor="#FFFFFF" @changing="onMBChange" @change="onMBChange" />
						
							<view class="current">
								<text class="value">{{my_mb_value}}</text>
							</view>
						</view>
					</block>
				</block>
				
				<block v-else-if="current_tab == 1">
					<view class="wrap-switch" :style="{width: windowsW}">
						<slider :value="filter_value" min="0" max="1" step="0.1" activeColor="#606dce" backgroundColor="#FFFFFF" @changing="onFilterChange" @change="onFilterChange" />
					
						<view class="current">
							<text class="value">{{filter_value}}</text>
						</view>
					</view>
				</block>
				
				<scroll-view class="wrap-list" :style="{width: windowsW}" scroll-x :show-scrollbar="false">
					<view class="beauty-list" :style="{width: windowsW}" v-if="current_tab == 0">
						<block v-for="(item, index) in beautyList" :key="index">
							<view class="beauty-item" @click="onBeauty(index)">
								<image class="beauty-img" :src="item.file" mode="heightFix"></image>
								
								<text class="beauty-name" :class="current_beauty == index ? 'name-select' : 'name-normal'">{{item.title}}</text>
							</view>
						</block>
					</view>
					
					<view class="filter-list" v-if="current_tab == 1">
						<block v-for="(item, index) in filterList" :key="index">
							<view class="filter-item" :class="(index == filterList.length - 1) ? 'last' : ''" @click="onFilter(item, index)">
								<image class="beauty-img" :src="item.file" mode="heightFix"></image>
								
								<text class="beauty-name" :class="current_filter == index ? 'name-select' : 'name-normal'">{{item.title}}</text>
							</view>
						</block>
					</view>
				</scroll-view>
				
				<!-- <view class="wrap-tab" :style="{width: windowsW}">
					<view class="tab-item" @click.stop="onTab(0)">
						<text :class="current_tab == 0 ? 'tab-title-select' : 'tab-title'">美颜</text>
					</view>
					
					<view class="tab-item" @click.stop="onTab(1)">
						<text :class="current_tab == 1 ? 'tab-title-select' : 'tab-title'">滤镜</text>
					</view>
				</view> -->
			</view>
		</totalMask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				showType: 0,
				
				current_tab: 0,
				
				my_gh_value: 9,
				my_zr_value: 9,
				my_hr_value: 9,
				my_mb_value: 9,
				
				filter_value: 1,
				
				beautyList: [
					{file: "../../static/beauty/my_gh.png", title: "美颜(光滑)"},
					{file: "../../static/beauty/my_zr.png", title: "美颜(自然)"},
					{file: "../../static/beauty/my_hr.png", title: "红润"},
					{file: "../../static/beauty/my_mb.png", title: "美白"}
				],
				current_beauty: 0,
				
				filterList: [
					{file: "", title: "无", icon : ""},
					{file: "", title: "白皙", icon : "../../static/filter/baixi.png"},
					{file: "", title: "标准", icon : "../../static/filter/normal.png"},
					{file: "", title: "自然", icon : "../../static/filter/ziran.png"},
					{file: "", title: "樱红", icon : "../../static/filter/yinghong.png"},
					{file: "", title: "云裳", icon : "../../static/filter/yunshang.png"},
					{file: "", title: "纯真", icon : "../../static/filter/chunzhen.png"},
					{file: "", title: "白兰", icon : "../../static/filter/bailan.png"},
					{file: "", title: "元气", icon : "../../static/filter/yuanqi.png"},
					{file: "", title: "超脱", icon : "../../static/filter/chaotuo.png"},
					{file: "", title: "香氛", icon : "../../static/filter/xiangfen.png"},
					{file: "", title: "美白", icon : "../../static/filter/white.png"},
					{file: "", title: "浪漫", icon : "../../static/filter/langman.png"},
					{file: "", title: "清新", icon : "../../static/filter/qingxin.png"},
					{file: "", title: "唯美", icon : "../../static/filter/weimei.png"},
					{file: "", title: "粉嫩", icon : "../../static/filter/fennen.png"},
					{file: "", title: "怀旧", icon : "../../static/filter/huaijiu.png"},
					{file: "", title: "蓝调", icon : "../../static/filter/landiao.png"},
					{file: "", title: "清凉", icon : "../../static/filter/qingliang.png"},
					{file: "", title: "日系", icon : "../../static/filter/rixi.png"},
				],
				current_filter: 0,
			}
		},
		destroyed() {
			uni.$off("ZBShowBeauty")
		},
		mounted() {
			/**
			 * 开启美颜
			 */
			uni.$on("ZBShowBeauty", () => {
				this.isShow = true
				this.showType = 5
			})
		},
		methods: {
			/**
			 * 美颜光滑滑块滑动
			 */
			onGhChange(e) {
				let value = e.detail.value
				this.my_gh_value = value
				uni.$emit("setBeautyGH", value)
			},
			/**
			 * 美颜自然滑块滑动
			 */
			onZRChange(e) {
				let value = e.detail.value
				this.my_zr_value = value
				uni.$emit("setBeautyZR", value)
			},
			/**
			 * 红润滑块滑动
			 */
			onHRChange(e) {
				let value = e.detail.value
				this.my_hr_value = value
				uni.$emit("setBeautyHR", value)
			},
			/**
			 * 美白滑块滑动
			 */
			onMBChange(e) {
				let value = e.detail.value
				this.my_mb_value = value
				uni.$emit("setBeautyMB", value)
			},
			/**
			 * 美颜点击
			 */
			onBeauty(index) {
				this.current_beauty = index
				if (index == 0) {
					uni.$emit("setBeautyGH", this.my_gh_value)
				} else if (index == 1) {
					uni.$emit("setBeautyZR", this.my_zr_value)
				} else if (index == 2) {
					uni.$emit("setBeautyHR", this.my_hr_value)
				} else if (index == 3) {
					uni.$emit("setBeautyMB", this.my_mb_value)
				}
			},
			/**
			 * 滤镜滑块
			 */
			onFilterChange(e) {
				let value = e.detail.value
				this.filter_value = value
				this.$emit("setFilterStrong", value)
			},
			/**
			 * 滤镜点击
			 */
			onFilter(item, index) {
				this.current_filter = index
				uni.$emit("chooseFilterImg", JSON.stringify(item))
			},
			/**
			 * 切换
			 */
			onTab(index) {
				this.current_tab = index
			},
		},
	}
</script>

<style scoped lang="scss">
	.wrap-switch {
		width: 750rpx;
		overflow: hidden;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.min-value {
		margin-left: 100rpx;
		margin-right: 30rpx;
		color: white;
		font-size: 32rpx;
	}
	.max-value {
		margin-right: 100rpx;
		margin-left: 30rpx;
		color: white;
		font-size: 28rpx;
	}
	.current {
		position: absolute;
		left: 325rpx;
		top: 20rpx;
		width: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.value {
		color: $theme-color;
		font-size: 32rpx;
	}
	
	.wrap-list {
		margin-top: 0rpx;
		height: 200rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
	}
	.beauty-list {
		display: flex;
		flex-direction: row;
		overflow: hidden;
	}
	.beauty-item {
		margin-left: 10rpx;
		width: 175rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.filter-list {
		display: flex;
		flex-direction: row;
		overflow: hidden;
	}
	.filter-item {
		margin-left: 20rpx;
		width: 200rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.last {
		margin-right: 20rpx;
	}
	.beauty-img {
		// width: 90rpx;
		height: 90rpx;
	}
	.beauty-name {
		margin-top: 15rpx;
		font-size: 28rpx;
	}
	.name-normal {
		color: white;
	}
	.name-select {
		color: $theme-color;
	}
	
	.wrap-tab {
		margin-top: 50rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.tab-item {
		margin-left: 20rpx;
		width: 345rpx;
		height: 60rpx;
		margin-left: 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.tab-title {
		font-size: 28rpx;
		color: white;
	}
	.tab-title-select {
		font-size: 28rpx;
		color: $theme-color;
	}
</style>